/**
 * 炼焦大数据智能诊断系统 - 工作流程图JavaScript文件
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 显示加载动画
    createLoadingSpinner('workflow-diagram');
    
    // 生成工作流程图
    setTimeout(() => {
        renderWorkflowDiagram();
    }, 500);
});

/**
 * 渲染工作流程图
 */
function renderWorkflowDiagram() {
    const container = document.getElementById('workflow-diagram');
    if (!container) return;
    
    // 使用Mermaid绘制工作流程图
    const diagram = `
    <div class="mermaid">
    flowchart TD
        Start([开始]) --> DataPrep[数据准备阶段]
        DataPrep --> DataCollection[数据采集与整理]
        DataCollection --> DataCleaning[数据清洗]
        DataCleaning --> FeatureEng[特征工程]
        FeatureEng --> DataStorage[数据存储与管理]
        
        DataStorage --> EDA[探索性数据分析]
        EDA --> UniAnalysis[单变量分析]
        EDA --> MultiAnalysis[多变量分析]
        EDA --> FurnaceAnalysis[炉号对比分析]
        EDA --> CycleAnalysis[周期分析]
        
        UniAnalysis & MultiAnalysis & FurnaceAnalysis & CycleAnalysis --> StatModel[统计建模与预测]
        StatModel --> Regression[多元回归分析]
        StatModel --> TimeSeries[时间序列分析]
        StatModel --> MultiTimeSeries[多变量时间序列分析]
        
        Regression & TimeSeries & MultiTimeSeries --> MLModel[机器学习模型开发]
        MLModel --> Supervised[监督学习模型]
        MLModel --> Unsupervised[无监督学习模型]
        MLModel --> DeepLearning[深度学习模型]
        MLModel --> Ensemble[模型集成与优化]
        
        Supervised & Unsupervised & DeepLearning & Ensemble --> AdvAnalysis[高级分析与应用]
        AdvAnalysis --> DynamicRelation[多变量动态关系分析]
        AdvAnalysis --> MultiOpt[多目标优化]
        AdvAnalysis --> KnowledgeGraph[知识图谱构建]
        AdvAnalysis --> ExplainableModel[解释性模型与可视化]
        
        DynamicRelation & MultiOpt & KnowledgeGraph & ExplainableModel --> ContOpt[持续优化与评估]
        ContOpt --> ModelMonitor[模型监控与更新]
        ContOpt --> ABTest[A/B测试]
        ContOpt --> Report[分析报告与建议生成]
        
        ModelMonitor & ABTest & Report --> End([结束])
        
        classDef phase fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
        classDef process fill:#f1f8e9,stroke:#558b2f,stroke-width:2px
        classDef milestone fill:#fbe9e7,stroke:#bf360c,stroke-width:2px
        
        class Start,End milestone
        class DataPrep,EDA,StatModel,MLModel,AdvAnalysis,ContOpt phase
        class DataCollection,DataCleaning,FeatureEng,DataStorage,UniAnalysis,MultiAnalysis,FurnaceAnalysis,CycleAnalysis,Regression,TimeSeries,MultiTimeSeries,Supervised,Unsupervised,DeepLearning,Ensemble,DynamicRelation,MultiOpt,KnowledgeGraph,ExplainableModel,ModelMonitor,ABTest,Report process
    </div>
    `;
    
    // 设置容器内容
    container.innerHTML = diagram;
    
    // 重新渲染Mermaid图表
    mermaid.init(undefined, container.querySelector('.mermaid'));
    
    // 添加交互效果
    setTimeout(addWorkflowInteractions, 1000);
}

/**
 * 为工作流程图添加交互效果
 */
function addWorkflowInteractions() {
    // 获取所有工作流程图中的节点
    const nodes = document.querySelectorAll('#workflow-diagram .node');
    
    nodes.forEach(node => {
        // 添加鼠标悬停效果
        node.addEventListener('mouseover', function() {
            this.style.cursor = 'pointer';
            this.querySelector('rect, circle, polygon, ellipse').setAttribute('stroke-width', '3px');
        });
        
        node.addEventListener('mouseout', function() {
            this.querySelector('rect, circle, polygon, ellipse').setAttribute('stroke-width', '2px');
        });
        
        // 添加点击事件
        node.addEventListener('click', function() {
            const nodeText = this.querySelector('text').textContent.trim();
            showWorkflowDetails(nodeText);
        });
    });
}

/**
 * 显示工作流程节点详细信息
 * @param {string} nodeText - 节点文本
 */
function showWorkflowDetails(nodeText) {
    // 工作流程阶段详细信息
    const workflowDetails = {
        '数据准备阶段': {
            title: '数据准备阶段',
            duration: '4周',
            description: '收集、清洗和准备炼焦过程数据，为后续分析打下基础。',
            tasks: [
                '与生产系统对接，获取历史炼焦数据',
                '根据《炼焦大数据智能诊断系统对标数据项》整理数据字典',
                '开发自动化数据采集脚本',
                '建立数据质量检测机制'
            ]
        },
        '数据采集与整理': {
            title: '数据采集与整理',
            description: '从各种数据源收集原始数据并进行初步整理。',
            tasks: [
                '与生产系统对接，获取历史炼焦数据',
                '根据《炼焦大数据智能诊断系统对标数据项》整理数据字典',
                '开发自动化数据采集脚本（使用Python requests/pandas）',
                '建立数据质量检测机制，识别异常值和缺失值'
            ]
        },
        '数据清洗': {
            title: '数据清洗',
            description: '处理原始数据中的缺失值、异常值和格式问题。',
            tasks: [
                '开发数据清洗流程，处理缺失值',
                '异常值检测与处理（基于IQR、Z-Score或隔离森林算法）',
                '时间序列数据平滑处理'
            ],
            code: `# 缺失值处理策略示例
import pandas as pd
import numpy as np
from sklearn.impute import KNNImputer

# KNN插值填充缺失值
def fill_missing_values(df, cols, n_neighbors=5):
    imputer = KNNImputer(n_neighbors=n_neighbors)
    df[cols] = imputer.fit_transform(df[cols])
    return df`
        },
        '特征工程': {
            title: '特征工程',
            description: '从原始数据中提取和构建有价值的特征。',
            tasks: [
                '炼焦过程关键参数提取',
                '时间特征构建（结焦周期特征、季节性特征）',
                '温度曲线特征提取',
                '多源数据融合预处理'
            ]
        },
        '探索性数据分析': {
            title: '探索性数据分析',
            duration: '3周',
            description: '通过统计和可视化方法探索数据特征和模式。',
            tasks: [
                '单变量分析',
                '多变量分析',
                '炉号对比分析',
                '周期分析'
            ]
        },
        '单变量分析': {
            title: '单变量分析',
            description: '分析各个变量的分布和统计特性。',
            tasks: [
                '开发炉号基础参数统计分析模块',
                '各关键指标分布分析',
                '时间序列模式识别'
            ],
            code: `# 单变量分析示例
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

def univariate_analysis(df, column, title=None):
    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(15, 5))
    # 分布图
    sns.histplot(df[column], kde=True, ax=ax1)
    ax1.set_title(f'{title or column} 分布')
    # 箱线图
    sns.boxplot(y=df[column], ax=ax2)
    ax2.set_title(f'{title or column} 箱线图')
    
    # 基本统计量
    stats = df[column].describe()
    return fig, stats`
        },
        '统计建模与预测': {
            title: '统计建模与预测',
            duration: '5周',
            description: '使用统计方法建立预测和分析模型。',
            tasks: [
                '多元回归分析',
                '时间序列分析',
                '多变量时间序列分析'
            ]
        },
        '机器学习模型开发': {
            title: '机器学习模型开发',
            duration: '6周',
            description: '应用机器学习和深度学习技术构建预测和分类模型。',
            tasks: [
                '监督学习模型',
                '无监督学习模型',
                '深度学习模型',
                '模型集成与优化'
            ]
        },
        '深度学习模型': {
            title: '深度学习模型',
            description: '使用深度学习技术处理复杂数据和模式。',
            tasks: [
                '温度曲线预测LSTM模型',
                '自编码器异常检测模型',
                '温度曲线卷积神经网络特征提取'
            ],
            code: `# LSTM时间序列预测示例
import tensorflow as tf
from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import LSTM, Dense, Dropout

# 构建LSTM模型
model = Sequential([
    LSTM(50, activation='relu', return_sequences=True, input_shape=(look_back, 1)),
    Dropout(0.2),
    LSTM(50, activation='relu'),
    Dropout(0.2),
    Dense(forecast_horizon)
])`
        },
        '高级分析与应用': {
            title: '高级分析与应用',
            duration: '4周',
            description: '进行高级数据分析并应用于实际生产优化。',
            tasks: [
                '多变量动态关系分析',
                '多目标优化',
                '知识图谱构建',
                '解释性模型与可视化'
            ]
        },
        '持续优化与评估': {
            title: '持续优化与评估',
            description: '持续监控和优化模型性能，评估实际应用效果。',
            tasks: [
                '模型性能监控方案',
                '模型漂移检测机制',
                '自动化重训练流程设计',
                'A/B测试',
                '自动化报告生成系统'
            ]
        }
    };
    
    // 获取节点详细信息
    const details = workflowDetails[nodeText] || {
        title: nodeText,
        description: '炼焦大数据智能诊断系统工作流程的组成部分。'
    };
    
    // 创建详细信息HTML
    let detailsHTML = `
        <h5>${details.title}</h5>
        <p>${details.description}</p>
    `;
    
    // 添加持续时间（如果有）
    if (details.duration) {
        detailsHTML += `<p><strong>预计时间：</strong>${details.duration}</p>`;
    }
    
    // 添加任务列表（如果有）
    if (details.tasks && details.tasks.length > 0) {
        detailsHTML += `
            <h6>主要任务：</h6>
            <ul>
                ${details.tasks.map(task => `<li>${task}</li>`).join('')}
            </ul>
        `;
    }
    
    // 添加代码示例（如果有）
    if (details.code) {
        detailsHTML += `
            <h6>代码示例：</h6>
            <pre><code class="language-python">${details.code}</code></pre>
        `;
    }
    
    // 创建模态框显示详细信息
    const modalId = 'workflowDetailModal';
    let modal = document.getElementById(modalId);
    
    // 如果模态框不存在，则创建
    if (!modal) {
        const modalDiv = document.createElement('div');
        modalDiv.innerHTML = `
            <div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">工作流程详情</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="${modalId}-body">
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modalDiv);
        modal = document.getElementById(modalId);
    }
    
    // 设置模态框内容
    document.getElementById(`${modalId}-body`).innerHTML = detailsHTML;
    
    // 显示模态框
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
} 